<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录收入 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="income-enhanced.css">
    <link href="js/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <style>
        /* 二级分类样式 */
        .subcategory-selector {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: none;
            background-color: #f0f5ff;
            border-radius: 12px;
            padding: 15px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .subcategory-title {
            position: absolute;
            top: -10px;
            left: 15px;
            background-color: #667eea;
            color: white;
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 10px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .subcategory-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        
        .subcategory-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background: #f8f9fa;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }
        
        .subcategory-item.active .subcategory-icon {
            background: #667eea;
            color: white;
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        }
        
        .subcategory-name {
            font-size: 12px;
            color: #718096;
        }
        
        .subcategory-item.active .subcategory-name {
            color: #667eea;
            font-weight: 600;
        }
        
        .category-selected-info {
            display: none;
            font-size: 14px;
            color: #667eea;
            margin-top: 10px;
            font-weight: 600;
            background-color: #eef2ff;
            padding: 8px 12px;
            border-radius: 8px;
            text-align: center;
        }

        .input-area {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 12px;
            padding: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .description-input {
            flex: 1;
            border: none;
            padding: 8px;
            font-size: 14px;
            outline: none;
        }

        .amount-display {
            font-size: 18px;
            font-weight: 600;
            color: #38a169; /* 收入使用绿色 */
            padding: 0 10px;
            white-space: nowrap;
        }

        .date-text {
            font-size: 14px;
            color: #718096;
            padding: 0 10px;
            white-space: nowrap;
            border-left: 1px solid #e2e8f0;
        }

        .calculator-btn.delete {
            background: #f8f9fa;
            color: #e53e3e; /* 删除按钮使用红色 */
        }

        .receipt-upload {
            background: #f8f9fa;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #718096;
            font-size: 18px;
        }

        .calculator {
            background: #f0fff4; /* 收入使用绿色背景 */
            border-radius: 16px 16px 0 0;
            padding: 15px;
            position: relative;
        }

        .date-selector {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: #fff;
            border-radius: 12px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .date-text {
            font-size: 14px;
            color: #2d3748;
            font-weight: 500;
        }

        .calculator-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .calculator-btn {
            background: white;
            border: none;
            border-radius: 12px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 500;
            color: #2d3748;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .calculator-btn.operator {
            background: #f8f9fa;
            color: #38a169; /* 收入使用绿色 */
        }

        .calculator-btn.equals {
            background: #38a169; /* 收入使用绿色 */
            color: white;
            font-weight: 600;
        }

        .calculator-btn.zero {
            grid-column: span 2;
        }
    </style>
</head>
<body>
    <div class="screen">
        <div class="app-container income-page">
            <div class="header">
                <div class="record-form-title">记录收入</div>
                <div class="date" id="current-date">2024年5月28日 星期三</div>
            </div>
            
            <div class="form-container">
                <!-- 收支切换 -->
                <div class="record-type-tabs">
                    <div class="record-type-tab expense" id="expense-tab">支出</div>
                    <div class="record-type-tab income active" id="income-tab">收入</div>
                </div>
                
                <!-- 一级分类选择 -->
                <div class="form-group">
                    <div class="category-selector" id="income-categories">
                        <div class="category-item active" data-category="工资">
                            <div class="category-icon">💰</div>
                            <div class="category-name">工资</div>
                        </div>
                        <div class="category-item" data-category="兼职">
                            <div class="category-icon">💼</div>
                            <div class="category-name">兼职</div>
                        </div>
                        <div class="category-item" data-category="理财">
                            <div class="category-icon">📈</div>
                            <div class="category-name">理财</div>
                        </div>
                        <div class="category-item" data-category="礼金">
                            <div class="category-icon">🧧</div>
                            <div class="category-name">礼金</div>
                        </div>
                    </div>
                    
                    <!-- 二级分类选择 -->
                    <div class="category-selected-info" id="category-selected-info"></div>
                    
                    <!-- 工资二级分类 -->
                    <div class="subcategory-selector" id="subcategory-工资">
                        <div class="subcategory-title">工资 - 二级分类</div>
                        <div class="subcategory-item" data-subcategory="月薪">
                            <div class="subcategory-icon">📅</div>
                            <div class="subcategory-name">月薪</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="年终奖">
                            <div class="subcategory-icon">🎁</div>
                            <div class="subcategory-name">年终奖</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="加班费">
                            <div class="subcategory-icon">⏰</div>
                            <div class="subcategory-name">加班费</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="绩效奖金">
                            <div class="subcategory-icon">🏆</div>
                            <div class="subcategory-name">绩效奖金</div>
                        </div>
                    </div>
                    
                    <!-- 兼职二级分类 -->
                    <div class="subcategory-selector" id="subcategory-兼职">
                        <div class="subcategory-title">兼职 - 二级分类</div>
                        <div class="subcategory-item" data-subcategory="家教">
                            <div class="subcategory-icon">📝</div>
                            <div class="subcategory-name">家教</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="网约工">
                            <div class="subcategory-icon">🚴</div>
                            <div class="subcategory-name">网约工</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="自由职业">
                            <div class="subcategory-icon">💻</div>
                            <div class="subcategory-name">自由职业</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="其他兼职">
                            <div class="subcategory-icon">🔄</div>
                            <div class="subcategory-name">其他兼职</div>
                        </div>
                    </div>
                    
                    <!-- 理财二级分类 -->
                    <div class="subcategory-selector" id="subcategory-理财">
                        <div class="subcategory-title">理财 - 二级分类</div>
                        <div class="subcategory-item" data-subcategory="股票">
                            <div class="subcategory-icon">📊</div>
                            <div class="subcategory-name">股票</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="基金">
                            <div class="subcategory-icon">💹</div>
                            <div class="subcategory-name">基金</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="存款利息">
                            <div class="subcategory-icon">🏦</div>
                            <div class="subcategory-name">存款利息</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="其他理财">
                            <div class="subcategory-icon">💎</div>
                            <div class="subcategory-name">其他理财</div>
                        </div>
                    </div>
                    
                    <!-- 礼金二级分类 -->
                    <div class="subcategory-selector" id="subcategory-礼金">
                        <div class="subcategory-title">礼金 - 二级分类</div>
                        <div class="subcategory-item" data-subcategory="红包">
                            <div class="subcategory-icon">🧧</div>
                            <div class="subcategory-name">红包</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="生日礼金">
                            <div class="subcategory-icon">🎂</div>
                            <div class="subcategory-name">生日礼金</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="节日礼金">
                            <div class="subcategory-icon">🎊</div>
                            <div class="subcategory-name">节日礼金</div>
                        </div>
                        <div class="subcategory-item" data-subcategory="其他礼金">
                            <div class="subcategory-icon">🎀</div>
                            <div class="subcategory-name">其他礼金</div>
                        </div>
                    </div>
                </div>
                
                <!-- 收款方式、描述、金额和小票上传 -->
                <div class="form-group">
                    <div class="input-area">
                        <input type="text" class="description-input" placeholder="添加备注...">
                        <div class="amount-display" id="amount-display">¥755</div>
                        <button class="receipt-upload" title="上传小票">📷</button>
                    </div>
                </div>
                
                <!-- 计算器 -->
                <div class="calculator">
                    <div class="calculator-grid">
                        <button class="calculator-btn" data-value="7">7</button>
                        <button class="calculator-btn" data-value="8">8</button>
                        <button class="calculator-btn" data-value="9">9</button>
                        <button class="calculator-btn date-text" id="input-date">📅 6.23</button>
                        <button class="calculator-btn" data-value="4">4</button>
                        <button class="calculator-btn" data-value="5">5</button>
                        <button class="calculator-btn" data-value="6">6</button>
                        <button class="calculator-btn operator" data-value="+">+</button>
                        <button class="calculator-btn" data-value="1">1</button>
                        <button class="calculator-btn" data-value="2">2</button>
                        <button class="calculator-btn" data-value="3">3</button>
                        <button class="calculator-btn operator" data-value="-">-</button>
                        <button class="calculator-btn" data-value=".">.</button>
                        <button class="calculator-btn" data-value="0">0</button>
                        <button class="calculator-btn operator delete" data-value="delete">⌫</button>
                        <!-- <button class="calculator-btn equals" id="cancel-btn">返回</button> -->
                        <button class="calculator-btn equals" id="submit-btn">完成</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 更新日期
        function updateDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
            
            document.getElementById('current-date').textContent = 
                `${year}年${month}月${day}日 星期${dayNames[now.getDay()]}`;
                
            // 更新输入区域的日期显示
            const inputDate = document.getElementById('input-date');
            if (inputDate) {
                inputDate.textContent = `📅 ${month}.${day}`;
            }
        }
        
        // 初始化日期
        updateDate();
        
        // 计算器按钮点击效果
        function setupCalculatorButtons() {
            const calculatorBtns = document.querySelectorAll('.calculator-btn');
            const amountDisplay = document.getElementById('amount-display');
            let currentAmount = '0';
            let operator = null;
            let firstOperand = null;
            let waitingForSecondOperand = false;
            let formula = ''; // 用于存储计算公式
            
            calculatorBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 添加点击动画效果
                    this.classList.add('btn-clicked');
                    setTimeout(() => {
                        this.classList.remove('btn-clicked');
                    }, 150);
                    
                    const value = this.getAttribute('data-value');
                    
                    // 处理删除按钮
                    if (value === 'delete') {
                        if (waitingForSecondOperand) {
                            currentAmount = '0';
                            waitingForSecondOperand = false;
                            formula = firstOperand; // 更新公式显示
                        } else {
                            // 删除最后一个字符
                            currentAmount = currentAmount.length > 1 ? 
                                currentAmount.slice(0, -1) : '0';
                            // 更新公式
                            if (operator) {
                                formula = firstOperand + operator + currentAmount;
                            } else {
                                formula = currentAmount;
                            }
                        }
                        amountDisplay.textContent = '¥' + formatAmount(currentAmount) + (formula ? ' [' + formula + ']' : '');
                        return;
                    }
                    
                    // 处理数字输入
                    if (!isNaN(value) || value === '.') {
                        if (waitingForSecondOperand) {
                            currentAmount = value;
                            waitingForSecondOperand = false;
                            // 更新公式
                            formula = firstOperand + operator + currentAmount;
                        } else {
                            // 如果当前金额是0，则替换；否则追加
                            currentAmount = currentAmount === '0' ? value : currentAmount + value;
                            // 更新公式
                            if (operator) {
                                formula = firstOperand + operator + currentAmount;
                            } else {
                                formula = currentAmount;
                            }
                        }
                        // 防止多个小数点
                        if (value === '.' && currentAmount.split('.').length > 2) {
                            currentAmount = currentAmount.slice(0, -1);
                            // 更新公式
                            if (operator) {
                                formula = firstOperand + operator + currentAmount;
                            } else {
                                formula = currentAmount;
                            }
                        }
                    }
                    
                    // 处理运算符
                    if (value === '+' || value === '-') {
                        // 如果已经有一个运算符，先计算之前的结果
                        if (operator && firstOperand !== null) {
                            // 计算结果
                            const result = calculate(firstOperand, currentAmount, operator);
                            // 更新公式显示为计算过程
                            formula = firstOperand + operator + currentAmount + '=' + result;
                            // 更新当前值
                            currentAmount = result;
                            // 更新第一个操作数为计算结果
                            firstOperand = parseFloat(result);
                        } else {
                            // 保存当前值作为第一个操作数
                            firstOperand = parseFloat(currentAmount);
                            formula = currentAmount;
                        }
                        
                        // 设置新的运算符
                        operator = value;
                        waitingForSecondOperand = true;
                        // 更新公式
                        formula = currentAmount + operator;
                    }
                    
                    // 更新显示金额和公式
                    amountDisplay.textContent = '¥' + formatAmount(currentAmount) + ' [' + formula + ']';
                });
            });
            
            // 完成按钮处理
            document.getElementById('submit-btn').addEventListener('click', function() {
                // 如果有未完成的计算，先计算结果
                if (operator && firstOperand !== null && !waitingForSecondOperand) {
                    // 计算结果
                    const result = calculate(firstOperand, currentAmount, operator);
                    // 更新公式显示为完整计算过程
                    formula = firstOperand + operator + currentAmount + '=' + result;
                    // 更新当前值
                    currentAmount = result;
                    // 更新显示
                    amountDisplay.textContent = '¥' + formatAmount(currentAmount) + ' [' + formula + ']';
                    // 重置计算状态
                    operator = null;
                    firstOperand = null;
                    waitingForSecondOperand = false;
                }
                
                // 这里可以添加提交表单的逻辑
                // ...
            });
        }
        
        // 计算函数
        function calculate(first, second, op) {
            first = parseFloat(first);
            second = parseFloat(second);
            
            if (op === '+') return (first + second).toString();
            if (op === '-') return (first - second).toString();
            
            return second.toString();
        }
        
        // 格式化金额显示
        function formatAmount(amount) {
            // 确保是字符串
            amount = amount.toString();
            
            // 如果有小数点，保留两位小数
            if (amount.includes('.')) {
                const parts = amount.split('.');
                if (parts[1].length > 2) {
                    parts[1] = parts[1].substring(0, 2);
                    amount = parts.join('.');
                }
            }
            
            return amount;
        }
        
        // 切换收入支出标签
        const expenseTab = document.getElementById('expense-tab');
        const incomeTab = document.getElementById('income-tab');
        const expenseCategories = document.getElementById('expense-categories');
        const incomeCategories = document.getElementById('income-categories');
        
        function switchToExpense() {
            expenseTab.classList.add('active');
            incomeTab.classList.remove('active');
            expenseCategories.style.display = 'grid';
            incomeCategories.style.display = 'none';
            document.title = '记录支出 - 记账助手';
            document.querySelector('.record-form-title').textContent = '记录支出';
            // 如果是从收入页面点击切换到支出，跳转到支出页面
            if (window.location.pathname.includes('income.html')) {
                window.location.href = 'expense.html';
            }
        }
        
        function switchToIncome() {
            incomeTab.classList.add('active');
            expenseTab.classList.remove('active');
            incomeCategories.style.display = 'grid';
            expenseCategories.style.display = 'none';
        }
        
        expenseTab.addEventListener('click', switchToExpense);
        incomeTab.addEventListener('click', switchToIncome);
        
        // 隐藏所有二级分类
        function hideAllSubcategories() {
            document.querySelectorAll('.subcategory-selector').forEach(selector => {
                selector.style.display = 'none';
            });
            document.querySelectorAll('.subcategory-item').forEach(item => {
                item.classList.remove('active');
            });
            document.getElementById('category-selected-info').style.display = 'none';
        }
        
        // 一级分类选择
        document.querySelectorAll('#income-categories .category-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除同组中其他分类的active状态
                const parent = this.parentElement;
                parent.querySelectorAll('.category-item').forEach(cat => {
                    cat.classList.remove('active');
                });
                
                // 添加当前分类的active状态
                this.classList.add('active');
                
                // 隐藏所有二级分类
                hideAllSubcategories();
                
                // 显示对应的二级分类
                const category = this.getAttribute('data-category');
                const subcategorySelector = document.getElementById(`subcategory-${category}`);
                if (subcategorySelector) {
                    subcategorySelector.style.display = 'grid';
                }
            });
        });
        
        // 支出分类选择（为了完整性）
        document.querySelectorAll('#expense-categories .category-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除同组中其他分类的active状态
                const parent = this.parentElement;
                parent.querySelectorAll('.category-item').forEach(cat => {
                    cat.classList.remove('active');
                });
                
                // 添加当前分类的active状态
                this.classList.add('active');
            });
        });
        
        // 二级分类选择
        document.querySelectorAll('.subcategory-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除同组中其他分类的active状态
                const parent = this.parentElement;
                parent.querySelectorAll('.subcategory-item').forEach(cat => {
                    cat.classList.remove('active');
                });
                
                // 添加当前分类的active状态
                this.classList.add('active');
                
                // 更新已选分类信息
                const category = document.querySelector('#income-categories .category-item.active').getAttribute('data-category');
                const subcategory = this.getAttribute('data-subcategory');
                document.getElementById('category-selected-info').textContent = `已选: ${category} - ${subcategory}`;
                document.getElementById('category-selected-info').style.display = 'block';
            });
        });
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateDate();
            setupCalculatorButtons();
            
            // 切换收支标签
            const incomeTabs = document.querySelectorAll('.record-type-tab');
            incomeTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    if (this.classList.contains('expense')) {
                        window.location.href = 'expense.html';
                    } else if (this.classList.contains('income')) {
                        window.location.href = 'income.html';
                    }
                });
            });
        });
        
        // 提交表单
        document.getElementById('submit-btn').addEventListener('click', function() {
            const amount = document.getElementById('amount').value.trim();
            const category = document.querySelector('.category-item.active').getAttribute('data-category');
            const subcategory = document.querySelector('.subcategory-item.active')?.getAttribute('data-subcategory') || '';
            const note = document.getElementById('note').value.trim();
            
            if (!amount) {
                showAlert('请输入金额');
                return;
            }
            
            // 模拟提交表单
            showAlert('记账成功！');
            
            // 获取URL参数，检查是否有图片参数
            const urlParams = new URLSearchParams(window.location.search);
            const hasImage = urlParams.get('hasImage') === 'true';
            const recorder = document.getElementById('recorder').value.trim() || '默认用户';
            
            // 跳转到账单详情页面
            setTimeout(() => {
                window.location.href = `bill-detail.html?id=${Date.now()}&type=income&hasImage=${hasImage}&recorder=${encodeURIComponent(recorder)}`;
            }, 1500);
        });
        
        // 取消按钮
        document.getElementById('cancel-btn').addEventListener('click', function() {
            window.location.href = 'index.html';
        });
        
        // 如果URL中有参数，填充表单
        window.addEventListener('load', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const amount = urlParams.get('amount');
            const note = urlParams.get('note');
            const category = urlParams.get('category');
            
            if (amount) document.getElementById('amount').value = amount;
            if (note) document.getElementById('note').value = note;
            if (category) {
                // 查找并选中对应的分类
                const categoryItems = document.querySelectorAll('#income-categories .category-item');
                categoryItems.forEach(item => {
                    if (item.getAttribute('data-category') === category) {
                        // 移除其他分类的active状态
                        categoryItems.forEach(cat => cat.classList.remove('active'));
                        // 添加当前分类的active状态
                        item.classList.add('active');
                        // 显示对应的二级分类
                        hideAllSubcategories();
                        const subcategorySelector = document.getElementById(`subcategory-${category}`);
                        if (subcategorySelector) {
                            subcategorySelector.style.display = 'grid';
                        }
                    }
                });
            }
            
            // 默认显示工资的二级分类
            const defaultCategory = document.querySelector('#income-categories .category-item.active').getAttribute('data-category');
            const defaultSubcategorySelector = document.getElementById(`subcategory-${defaultCategory}`);
            if (defaultSubcategorySelector) {
                defaultSubcategorySelector.style.display = 'grid';
            }
        });
        
        // Bootstrap 模态框函数
        function showAlert(message) {
            document.getElementById('alertModalBody').textContent = message;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            alertModal.show();
        }
    </script>
</body>
</html>